<template>
  <view :style="colorStyle">
    <view class="infobox1 flex aitems">
      <view class="block1 flex aitems">
        <view class="icon">
          <u-icon name="search" size="20" color="#1F1F1F"></u-icon>
        </view>
        <input
          type="text"
          v-model="title"
          placeholder-class="c858585 f28"
          class="c1F1F1F f28"
          placeholder="请输入标题"
          @confirm="search"
        />
      </view>
    </view>
    <view class="infobox2">
      <view class="block1">
        <view class="title c1F1F1F f24"> 热门话题 </view>
        <view class="info1 flex aitems wrap c1F1F1F f28">
          <view
            :class="tagid == item.id ? 'tip2' : 'tip1'"
            v-for="(item, index, key) in tagList"
            @click="tagChange(item)"
            :key="key"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <view class="block1">
        <view class="title c1F1F1F f24"> 全部话题 </view>
        <view class="info1 flex aitems wrap c1F1F1F f28">
          <view
            :class="tagid == item.id ? 'tip2' : 'tip1'"
            v-for="(item, index, key) in tagAllList"
            @click="tagChange(item)"
            :key="key"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>

    <view class="infobox3 flex wrap between">
      <view
        class="list"
        v-for="(item, index, key) in list"
        :key="key"
        @click="gourl(`/pages/community/detail?id=${item.id}`)"
      >
        <image
          :src="item.img.split(',')[0]"
          class="img"
          mode="aspectFill"
        ></image>
        <view class="block1 ellipsis1 c1F1F1F f32 fontWeight">
          {{ item.title }}
        </view>
        <view class="block2 flex aitems between">
          <view class="left flex aitems">
            <image :src="item.userAvatar" class="icon1" mode=""></image>
            <view class="name c1F1F1F f24"> {{ item.userNickName }} </view>
          </view>
          <view class="right flex aitems">
            <u-icon name="thumb-up" color="#525252"></u-icon>
            <view class="num c525252 f24"> {{ item.likeNum }} </view>
          </view>
        </view>
      </view>
    </view>

    <nodata v-if="list.length == 0" />

    <view class="" style="height: 200rpx"> </view>
  </view>
</template>

<script>
import { topicTagList, topicPushPage } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { getToken, setStorage } from "../../utils/storage";
import { loading, go } from "@/utils/wxAPI";
export default {
  mixins: [colors],
  data() {
    return {
      tagList: [],
      tagAllList: [],
      list: [],
      total: 0,
      current: 1,
      title: "",
      tagid: "",
    };
  },
  onLoad(options) {
    this.options = options;
    if (getToken()) {
      this.topicTagList();
      this.topicTagListall();
    }
  },
  methods: {
    async topicTagList() {
      let { data } = await topicTagList({
        status: 1,
        isHot: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.tagList = data.data;
      }
    },
    async topicTagListall() {
      let { data } = await topicTagList({
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.tagAllList = data.data;
      }
    },
    async search() {
      this.tagid = "";
      this.current = 1;
      this.topicPushPage();
    },
    async topicPushPage() {
      loading();
      let { data } = await topicPushPage({
        current: this.current,
        size: 10,
        title: this.title,
        tag: this.tagid,
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.total = data.data.total;
        let list = data.data.records;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    tagChange(item) {
      if (this.tagid == item.id) {
        this.tagid = "";
      } else {
        this.tagid = item.id;
      }
      this.current = 1;
      this.topicPushPage();
    },
    gourl(url) {
      go(url);
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.topicPushPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.topicPushPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #fff;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #fff;
}

.infobox1 {
  background: #fff;
  margin: 30rpx 30rpx 0;

  .block1 {
    border-radius: 44rpx;
    background: #f5f5f5;
    height: 64rpx;
    width: 100%;

    .icon {
      margin-left: 28rpx;
      position: relative;
      top: -4rpx;
    }

    input {
      margin-left: 16rpx;
      width: calc(100% - 16rpx - 48rpx);
    }
  }
}

.infobox2 {
  margin: 50rpx 0 0 30rpx;

  .block1 {
    margin: 28rpx 0;

    .title {
    }

    .info1 {
      margin: 28rpx 0 0;

      .tip1 {
        margin: 0 14rpx 24rpx 0;
        border-radius: 40rpx;
        border: 1px solid #ccc;
        padding: 12rpx 0;
        width: 162rpx;
        text-align: center;
      }
      .tip2 {
        margin: 0 14rpx 24rpx 0;
        border-radius: 40rpx;
        border: 1px solid var(--view-theme);
        color: var(--view-theme);
        background: var(--view-minorColorT);
        padding: 12rpx 0;
        width: 162rpx;
        text-align: center;
      }
    }
  }
}

.infobox3 {
  margin: 0 30rpx 0;
  position: relative;
  // top: calc(110rpx + 22rpx + 80rpx);

  .list {
    border-radius: 8rpx;
    background: #fff;
    width: 337rpx;
    margin: 0 0 24rpx 0;
    overflow: hidden;

    .img {
      width: 336rpx;
      height: 448rpx;
      border-radius: 8rpx 8rpx 0px 0px;
    }

    .block1 {
      padding: 16rpx;
    }

    .block2 {
      margin: 16rpx;

      .left {
        .icon1 {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
        }

        .name {
          margin-left: 16rpx;
        }
      }

      .right {
        .num {
        }
      }
    }
  }
}
</style>
